<template>
  <div class="search-content">
    <div class="search-header">
      <div class="search-icon">
        <img src="../../../img/mobile/search.png">
      </div>
      <div class="search-input">
        <input type="" v-model='searchprop' name="" @keyup.enter="search(searchprop)" placeholder="点击搜索">
      </div>
    </div>
    <div class="cancel" @click="cancelSearch">取消</div>
    <div class="hot-search"  v-if="showhotlist">
      <div class="hot-title">热门搜索</div>
      <div class="hot-search-list">
        <span @click="search(hotlist)" v-for="hotlist in hot.keys">{{hotlist}}</span>
      </div>
    </div>
    <div class="container-list" v-else>
      <div class="content-list-block" v-if="total!=0">
        <div class="content-list-body">
          <div class="content-list three-list" @click="linkDetail" :data-id="contlist.id" v-for="contlist in datalist">
            <div class="content-list-ele">
              <div class="pc-right-line">
                <div class="left-img"  v-lazy:background-image="{src: contlist.cover_path, error: imgUrl, loading: imgUrl}"></div>
              </div>
              <div class="right-text">
                <div class="right-content-text">
                  {{contlist.title}}
                </div>
                <div class="right-content-note pc-bk">
                  {{contlist.note}}
                </div>
                <div class="content-info list-info">
                  {{contlist.author}} {{contlist.publish_time}}
                </div>
              </div>
              <div class="clear"></div>
            </div>
          </div>
          <div class="see-more-btn" v-if="nowtotal>= 20">
            <span @click="moreList">查看更多</span>
          </div>
        </div>
      </div>
      <div class="no-content" v-else>
        <div class="nosearch">
          <img src="../../../img/mobile/no_search.png" alt="">
        </div>
        本次搜索内容为空！
      </div>
    </div>
  </div>
</template>
<script>
  import api from '../../../utils/api'
  import apiConfig from '../../../utils/apiconfig.js'
  import helper from '../../../utils/helper'
  import loading from '../../../components/loading'
  import { Indicator } from 'mint-ui'
  export default {
    props: ['searchprop'],
    data () {
      return {
        total: '',
        showhotlist: true,
        datalist: [],
        page: 1,
        content: '',
        hot: {},
        nowtotal: 0,
        imgUrl: ''
      }
    },
    components: {
      loading
    },
    created () {
      console.log(this.searchprop)
      this.getHotSearch()
      var imgUrl = require('../../../img/mobile/blank.jpg')
      this.imgUrl = imgUrl
      if (this.searchprop !== '') {
        this.search(this.searchprop)
      }
    },
    methods: {
      linkDetail (e) {
        console.log(e.currentTarget.dataset.id)
//        this.$router.push('/home/detail?id=' + e.currentTarget.dataset.id)
        this.$router.replace('/home/detail?id=' + e.currentTarget.dataset.id)
        window.location.reload()
      },
      cancelSearch () {
        this.$emit('cansearch', false)
      },
      search (val) {
        console.log(val)
        this.getDatalist(val, 1)
        this.page = 1
        this.content = val
        this.searchprop = val
      },
      getHotSearch () {
        var param = {
          action: 'HOT_SEARCH'
        }
        this.params = param
        api.GET(helper.getClientApiUrl(apiConfig.web.hotsearch), this.params, res => {
          this.hot = res
        }, res => {
          console.log(res)
        })
      },
      getDatalist (content, page) {
        var param = {
          key: content,
          page: page
        }
        Indicator.open('加载中...')
        this.params = param
        console.log(param)
        api.GET(helper.getClientApiUrl(apiConfig.web.serachlist), this.params, res => {
          this.data = res
          this.nowtotal = this.data.list.length
          this.total = res.total
          var arraylist
          console.log(page)
          if (this.page > 1) {
            arraylist = this.datalist.concat(res.list)
          } else {
            arraylist = res.list
          }
          console.log(arraylist)
          this.datalist = arraylist
          this.loading = false
          this.showhotlist = false
          Indicator.close()
        }, res => {
          console.log(res)
          Indicator.close()
        })
      },
      moreList () {
        var thispage = this.page + 1
        this.page = thispage
        this.getDatalist(this.content, thispage)
      }
    }
  }
</script>
<style>
.search-icon{
	float: left;
  margin-top: 5px;
}
.search-icon img{
	width: 15px;
    vertical-align: middle;
}
.search-input{
    margin: 0 25px;
}
.search-input input{
    width: 100%;
    border: 0;
    outline: 0;
    line-height: 25px;
    font-size: 14px;
}
.search-header{
    margin: 15px;
    border-bottom:  1px solid #333;
}
.cancel{
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 999;
    font-size: 14px;
    cursor: pointer;
    color:#4e6e6d;
}
.hot-search{
    padding: 0 15px;
}
.hot-title{
    color: #666;
    font-size: 15px;
}
.hot-search-list span{
    padding: 8px 20px 8px 0;
    font-size: 17px;
    display: inline-block;
    cursor: pointer;
}
.hot-search-list{
    padding: 5px 50px 15px 0;
}
.learn-all img{
  width: 7px;
  vertical-align: middle;
  margin-left: 5px;
}
.top-big-img img{
  width:100%;
}
.content-info{
  font-size: 13px;
  color: #4e6e6d;
  margin-top: 10px;
}
/*.footer-tab li {
  display: inline-block;
  width: 33.3%;
  float: left;
  border-right: 1px solid #797575;
  box-sizing: border-box;
  text-align: center;
}*/
.footer-copyright div{
  text-align: center;
}

.see-more-btn{
  text-align: center;
}
.see-more-btn span{
  height: 30px;
  line-height: 30px;
  display: inline-block;
  padding: 0 25px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  color: #9b9b9b;
  border:1px solid #9b9b9b;
  margin: 20px 0;
}
.mint-indicator-wrapper{
  z-index: 999;
}
.nosearch{
  margin: 40px 0 10px 0;
}
@media screen and (min-width: 1200px) {
  .search-icon{
    margin-top: 3px;
  }
  .search-input{
    margin: 0 30px;
  }
  .search-input input{
    font-size: 18px;
  }
  .search-icon img{
    width: 19px;
  }
  .search-header{
    padding: 10px 0;
  }
  .hot-search-list span{
    padding: 8px 60px 8px 0;
    font-size: 19px;
  }
  .search-content{
    width: 1200px;
    margin: 0 auto;
    position: relative;
  }

  .cancel{
      position: absolute;
      top: 15px;
      right: 20px;
      z-index: 999;
      font-size: 16px;
  }
}

</style>
